<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <i class="el-icon-search btn-search" @click="handleShowSearch()" />
        <div class="btn-box">
          <el-button type="success" @click="handleAdd()">新增</el-button>
          <a
            class="el-button el-button--success el-button--medium"
            href="http://123.57.59.222:8081/api/file/supplier_template.xlsx"
            type="primary"
          >模版下载</a>
          <el-upload
            :action="UploadUrl()"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            class="upload_image"
          >
            <el-button
              v-show="roleName == 'ROLE_ADMIN'"
              type="primary"
            >导入</el-button>
          </el-upload>
          <el-button
            type="primary"
            icon="el-icon-document"
            @click="gys_excel"
          >导出Excel</el-button>
        </div>
        <div v-show="showbtns == true" class="search-lf" style="width: 72%">
          <el-form-item label="供应商名称">
            <el-input

              v-model="listQuery.supplierName"
              placeholder="供应商名称"
            />
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select v-model="listQuery.contractState" filterable>
              <el-option label="已过期" value="已过期" />
              <el-option label="正常" value="正常" />
              <el-option label="未签订" value="未签订" />
              <el-option label="即将到期" value="即将到期" />
            </el-select>
          </el-form-item>

          <el-form-item label="类型">
            <el-select v-model="listQuery.supplierTypeId" filterable>
              <el-option
                v-for="item in supplierTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!-- <el-input v-model="listQuery.name"  placeholder="供应商类型"></el-input> -->
          </el-form-item>
          <el-form-item label="服务">
            <el-select
              v-model="listQuery.serviceTypeName"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in serviceContents"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="省份">
            <el-input
              v-model="listQuery.provinceName"
              placeholder="所属省份"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="listQuery.supplierState" filterable>
              <el-option label="使用中" value="使用中" />
              <el-option label="已饱和" value="已饱和" />
              <el-option label="已禁用" value="已禁用" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-right: 2px; width: 100px">
            <el-button
              type="primary"
              plain
              @click="fetchData()"
            >查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      element-loading-text="Loading..."
      fit
      highlight-current-row
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" width="100px" label="使用状态">
        <template slot-scope="{ row }">
          <el-tag :type="row.supplierState | statusColorFilter">{{
            row.supplierState
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="供应商名称" align="center">
        <template slot-scope="{ row }">
          <span class="link-type" @click="handleDetail(row)">{{
            row.supplierName
          }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所在地区">
        <template slot-scope="{ row }">
          <span>{{ row.provinceName }}{{ row.cityName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="可承接服务范围" align="center">
        <template slot-scope="{ row }">{{ row.serviceTypeNames }}</template>
      </el-table-column>
      <el-table-column label="合作课程数" align="center">
        <template slot-scope="{ row }">{{ row.numberOfCourses }}</template>
      </el-table-column>
      <el-table-column label="供应商综合评价" width="180" align="center">
        <template slot-scope="{ row }">
          {{ row.finalEvaluation }}
        </template>
      </el-table-column>
      <el-table-column label="合同状态" align="center">
        <template slot-scope="{ row }">
          {{ row.contractState }}
        </template>
      </el-table-column>
      <el-table-column v-if="roleName == 'ROLE_ADMIN'" label="操作" width="280" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            :disabled="editDisabled == true"
            icon="el-icon-edit"
            @click="handleEdit(row)"
          >编辑</el-button>
          <el-button
            class="mg-l"
            type="success"
            size="mini"
            icon="el-icon-tickets"
            @click="showEvaluate(row)"
          >评价记录</el-button>
          <el-button
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDel(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchData"
    />
    <el-dialog
      width="70%"
      height="480px"
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑供应商' : '添加供应商'"
      @close="handleClose"
    >
      <el-form
        ref="suppliers"
        class="rk_form"
        label-width="120px"
        :model="suppliers"
        :rules="rulesForm"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="supplierName" label="供应商名称">
              <el-input
                v-model="suppliers.supplierName"
                placeholder="请输入供应商名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="supplierTypeName" label="供应商类型">
              <el-radio-group v-model="suppliers.supplierTypeName">
                <el-radio
                  v-for="(item, index) in supplierTypeList"
                  :key="index"
                  :label="item.name"
                  @change="handleSupplierType($event)"
                >{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所属区域" prop="provinceId" class="region_select">
          <el-select
            v-model="suppliers.provinceId"
            filterable
            placeholder="请选择"
            @change="handleProvince"
          >
            <el-option
              v-for="item in allProvinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.provinceId"
            />
          </el-select>
          <el-select
            v-model="suppliers.cityName"
            filterable
            placeholder="请选择"
            @change="handleCity"
          >
            <el-option
              v-for="item in CitiesList"
              :key="item.cityId"
              :label="item.city"
              :value="item.city"
            />
          </el-select>
          <el-select
            v-model="suppliers.areaName"
            filterable
            placeholder="请选择"
            @change="handleChangePro2"
          >
            <el-option
              v-for="item in AreasList"
              :key="item.areaId"
              :label="item.area"
              :value="item.area"
            />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12" />
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input
                v-model="suppliers.address"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人员">
              <el-input
                v-model="suppliers.contacts"
                placeholder="请输入联系人员"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input
                v-model="suppliers.phone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业邮箱">
              <el-input v-model="suppliers.email" placeholder="企业邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议编号">
              <el-input
                v-model="suppliers.agreementNo"
                placeholder="请输入协议编号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="协议起止时间">
              <el-date-picker
                v-model="agreementStartTime"
                value-format="yyyy/MM/dd"
                type="daterange"
                format="yyyy/MM/dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="estimateMonthCapacity" label="月承接量">
              <el-input
                v-model="suppliers.estimateMonthCapacity"
                type="number"
                style="width: 50%"
                placeholder="月承接量"
              />分钟
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <span style="font-size: 12px; margin-top: -10px; margin-left: 30px">
              原有提供服务：{{ suppliers.serviceTypeNametes }}</span>
            <el-form-item label="可提供服务" prop="serviceTypeNames">
              <el-select
                v-model="suppliers.serviceTypeNamete"
                filterable
                multiple
                placeholder="请选择"
                @change="handleCheckedCitiesChange($event)"
              >
                <el-option
                  v-for="item in serviceContents"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="相关报价">
              <el-input
                v-model="suppliers.quotation"
                style="width: 50%"
                placeholder="请输入相关报价"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否禁用供应商">
              <el-switch
                v-model="suppliers.state"
                active-color="#d9d9d9"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始评分">
              <el-rate v-model="suppliers.initEvaluation" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="公司介绍">
          <el-input
            v-model="suppliers.companyProfile"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12" />
          <el-col :span="12" />
        </el-row>

        <el-form
          v-show="dialogType === 'edit'"
          label-position="top"
          label-width="80px"
          :model="suppliers"
        >
          <el-form-item label="相关附件" />

          <div v-show="vedioList.length > 0" class="fj-box">
            <el-tag effect="dark">视频</el-tag>
            <!-- <Upload   v-model="uploadType1" /> -->

            <ul>
              <!-- <div >视频样片</div> -->
              <li v-for="(item, index) in vedioList" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                >删除</a>
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                  @click="
                    handleTest(baseTest + '/api/file/download' + item.filePath)
                  "
                >下载</a>
              </li>
            </ul>
          </div>

          <div v-show="vedioList2.length > 0" class="fj-box">
            <el-tag type="success" effect="dark">图片</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList2" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                >删除</a>
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                >下载</a>
              </li>
            </ul>
          </div>

          <div v-show="vedioList3.length > 0" class="fj-box">
            <!-- <p></p> -->
            <el-tag type="warning" effect="dark">音频</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList3" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                >删除</a>
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                >下载</a>
              </li>
            </ul>
          </div>

          <div v-show="vedioList4.length > 0" class="fj-box">
            <el-tag type="danger" effect="dark">文档</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList4" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                >删除</a>
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                >下载</a>
              </li>
            </ul>
          </div>

          <div>
            <Upload @getInfo="getInfo" />
          </div>

          <div />
        </el-form>
      </el-form>

      <div style="text-align: right">
        <el-button type="primary" @click="confirmSupplier">保存</el-button>
        <el-button
          type="danger"
          class="cancel_border"
          plain
          @click="
            dialogVisible = false;
            editDisabled = false;
          "
        >取消</el-button>
      </div>
    </el-dialog>
    <el-dialog width="70%" :visible.sync="dialogVisibleInfo" title="供应商详情">
      <el-form
        ref="suppliers"
        class="rk_form"
        label-width="150px"
        :model="suppliers"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用状态">
              <span>{{ suppliers.supplierState }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称：">
              <span>{{ suppliers.supplierName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务类型：">
              <span>{{ suppliers.supplierTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域：">{{
              suppliers.provinceName
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="详细地址：">
              <span>{{ suppliers.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人员：">
              <span>{{ suppliers.contacts }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话：">
              <span>{{ suppliers.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业邮箱：">
              <span placeholder="企业邮箱">{{ suppliers.email }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间：">{{
              suppliers.agreementStartTime
            }}</el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="协议编号：">
              <span>{{ suppliers.agreementNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束时间：">{{
              suppliers.agreementEndTime
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="月承接量（分钟）：">
              <span>{{ suppliers.estimateMonthCapacity }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="可提供服务：">
              {{ suppliers.serviceTypeNames }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="相关报价：">
              <span type="number">{{ suppliers.quotation }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否禁用供应商：">
              <el-switch
                v-model="suppliers.state"
                disabled
                active-color="#d9d9d9"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始评分">
              <el-rate
                v-model="suppliers.initEvaluation"
                disabled
                show-score
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="公司介绍">
          <span>{{ suppliers.companyProfile }}</span>
        </el-form-item>

        <el-form label-position="top" label-width="80px" :model="suppliers">
          <el-form-item label="相关附件">
            <div class="fj-box">
              <el-tag effect="dark">视频</el-tag>
              <!-- <Upload   v-model="uploadType1" /> -->

              <ul>
                <!-- <div >视频样片</div> -->
                <li v-for="(item, index) in vedioList" :key="index">
                  <span>{{ item.fileName }}</span>
                  <!-- <a href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    @click="
                      handleTest(
                        baseTest + '/api/file/download' + item.filePath
                      )
                    "
                  >下载</a>
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <el-tag type="success" effect="dark">图片</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList2" :key="index">
                  <span>{{ item.fileName }}</span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a>
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <!-- <p></p> -->
              <el-tag type="warning" effect="dark">音频</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList3" :key="index">
                  <span>
                    {{ item.fileName }}
                  </span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a>
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <el-tag type="danger" effect="dark">文档</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList4" :key="index">
                  <span>
                    {{ item.fileName }}
                  </span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->

                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a>
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-form>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleVedio" width="60%">
      <video-player
        ref="videoPlayer"
        class="video-player vjs-custom-skin"
        :playsinline="true"
        :options="playerOptions"
        @close="vedioDialog"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="vedioDialog()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog width="80%" :visible.sync="showEvaluateInfo" title="评价详情" @close="closeEvaluate">
      <el-row>
        <el-col :span="24">
          <div class="row-bg">
            <span>供应商名称：{{ supplierName }}</span>
            <span>综合评分：{{ evaluates_data.finalEvaluation }}</span>
            <span>拍摄水平：{{ evaluates_data.shootLevel }}</span>
            <span>制作+后期：{{ evaluates_data.postProduction }}</span>
            <span>动画（二维）：{{ evaluates_data.delivery2Level }}</span>
            <span>动画（三维）：{{ evaluates_data.delivery3Level }}</span>
            <span>服务态度：{{ evaluates_data.serviceAttitude }}</span>
            <span>如期交付：{{ evaluates_data.deliverySchedule }}</span>
            <span>沟通能力：{{ evaluates_data.communicateSkill }}</span>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="evaluates_data.dataList"
        style="width: 100%"
      >
        <el-table-column
          prop="poId"
          label="po"
          width="180"
        />
        <el-table-column
          prop="courseName"
          label="课程"
          width="180"
        />
        <el-table-column
          prop="serviceType"
          label="服务类型"
        />
        <el-table-column
          label="拍摄水平"
        >
          <template slot-scope="{ row }">
            {{ row.shootLevel == -1 ? '' : row.shootLevel }}
          </template>
        </el-table-column>
        <el-table-column
          label="制作+后期"
        >
          <template slot-scope="{ row }">
            {{ row.postProduction == -1 ? '' : row.postProduction }}
          </template>
        </el-table-column>
        <el-table-column
          label="二维交付水平"
        ><template slot-scope="{ row }">
          {{ row.delivery2Level == -1 ? '' : row.delivery2Level }}
        </template>
        </el-table-column>
        <el-table-column
          label="三维交付水平"
        ><template slot-scope="{ row }">
          {{ row.delivery3Level == -1 ? '' : row.delivery3Level }}
        </template>
        </el-table-column>
        <el-table-column
          label="服务态度"
        ><template slot-scope="{ row }">
          {{ row.serviceAttitude == -1 ? '' : row.serviceAttitude }}
        </template>
        </el-table-column>
        <el-table-column
          label="如期交付"
        ><template slot-scope="{ row }">
          {{ row.deliverySchedule == -1 ? '' : row.deliverySchedule }}
        </template>
        </el-table-column>
        <el-table-column
          label="沟通能力"
        ><template slot-scope="{ row }">
          {{ row.communicateSkill == -1 ? '' : row.communicateSkill }}
        </template>
        </el-table-column>
        <el-table-column
          prop="appraise"
          label="评价"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  addSuppliers,
  suppliersList,
  updateSuppliersState,
  updateSuppliers,
  delSupplierFile,
  deleteSupplier,
  getProvinces,
  getCities,
  getAreas,
  getSupplierInfo,
  getSupplierAttachInfo,
  getSupplierBySupplierId
} from '@/api/supplier'
import {
  getSupplierContent,
  getSupplierType,
  baseUrl2
} from '@/api/remote-search'
import { exportSupplier } from '@/api/exportAll'
import Upload from '@/components/Upload/SingleImage3'
import { parseTime } from '@/utils'
import { exportSupplierList } from '@/api/exportExcel'
import Pagination from '@/components/Pagination'
export default {
  name: 'SupplierList',

  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '已饱和',
        2: '已禁用',
        3: '正常'
      }
      return statusMap[status]
    },

    constatusFilter(status) {
      const statusMap = {
        1: '合同状态',
        2: '未签订',
        3: '正常',
        4: '过期',
        5: '即将过期'
      }
      return statusMap[status]
    },
    statusColorFilter(status) {
      const statusMap = {
        已饱和: 'success',
        已禁用: 'danger',
        使用中: 'warning'
      }
      return statusMap[status]
    }
  },
  components: { Pagination, Upload },

  data() {
    return {
      roleName: sessionStorage.getItem('roleName'),
      rulesForm: {
        supplierName: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' }
        ],

        supplierTypeName: [
          {
            type: 'string',
            required: true,
            message: '请选择供应商类型',
            trigger: 'change'
          }
        ],

        provinceId: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        estimateMonthCapacity: [
          { required: true, message: '月承接量不能为空', trigger: 'blur' }
        ],
        serviceTypeNamete: [
          { required: true, message: '请选择可提供服务', trigger: 'change' }
        ]
      },
      uploadUrl: '',
      showbtns: false,
      baseTest: baseUrl2,
      dialogVisibleVedio: false,
      vedioList: [],
      vedioList2: [],
      vedioList3: [],
      vedioList4: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有刘媞大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        poster: '../../static/images/test.jpg', // 你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      uploadBtn: true,
      // dataObj: { supplierId: '', type: '' },
      supplierTypeList: [], // 服务类型
      uploadType: '4', //
      dialogVisibleInfo: false, // 供应商详情
      uploadType1: '1', //
      uploadType2: '2', //
      uploadType3: '3', //

      checkedCities: [],
      serviceContents: '',
      resData: [],
      allProvinceList: [],
      downloadLoading: false,
      CitiesList: [],
      agreementStartTime: [],
      AreasList: [],
      value: '',
      list: null,
      dialogVisible: false, // 新增
      listLoading: true,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx',
      total: 0,
      multipleTable: [],
      listQuery: {
        access_token: sessionStorage.getItem('token'),
        page: 1,

        supplierName: '',
        supplierTypeId: '',
        contacts: '',
        pageSize: 20
      },
      suppliers: {},
      dialogType: 'new',
      ids: '',
      serviceName: '',
      editDisabled: false,
      showEvaluateInfo: false,
      evaluates_data: '',
      supplierName: ''
    }
  },
  created() {
    this.fetchData()
    this.getallProvinceList()
  },
  methods: {
    handleRemove(id) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          delSupplierFile(id).then((res) => {
            if ((res.data.code === 200)) {
              this.$message.success('删除成功')
              this.getInfo(sessionStorage.getItem('supplierId'))
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    UploadUrl() {
      return baseUrl2 + '/api/file/import_supplier'
    },
    handleClose() {
      this.editDisabled = false
    },
    handleTest(val) {
      this.dialogVisibleVedio = true
      this.playerOptions.sources[0].src = val
    },
    vedioDialog() {
      this.playerOptions.sources[0].src = ''
      this.dialogVisibleVedio = false
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns
    },

    gys_excel() {
      // window.location.href="http://192.168.60.85:8081/api/file/export_supplier?supplierName="+this.listQuery.supplierName+'&contacts='+this.listQuery.contacts+"&supplierTypeId="+this.listQuery.supplierTypeId
      exportSupplierList(this.listQuery)
      // window.location.href =
      //     baseUrl2 +
      //     "api/file/export_supplier?supplierName=" +
      //     this.listQuery.supplierName +
      //     "&contacts=" +
      //     this.listQuery.contacts +
      //     "&supplierTypeId=" +
      //     this.listQuery.supplierTypeId;
    },
    handleDetail(row) {
      this.suppliers = row
      const data = {
        supplierId: row.id,
        type: 1
      }
      sessionStorage.setItem('infoId', row.id)
      getSupplierAttachInfo(data).then((res) => {
        this.vedioList = res.data.data
      })
      const data2 = {
        supplierId: row.id,
        type: 2
      }
      getSupplierAttachInfo(data2).then((res) => {
        this.vedioList2 = res.data.data
      })
      const data3 = {
        supplierId: row.id,
        type: 3
      }
      getSupplierAttachInfo(data3).then((res) => {
        this.vedioList3 = res.data.data
      })
      const data4 = {
        supplierId: row.id,
        type: 4
      }
      getSupplierAttachInfo(data4).then((res) => {
        this.vedioList4 = res.data.data
      })
      this.dialogVisibleInfo = true
    },
    handleSupplierType(id) {
      let obj = {}
      obj = this.supplierTypeList.find((item) => {
        return item.name === id
      })
      this.suppliers.supplierTypeId = obj.id
    },

    getArrEqual(arr1, arr2) {
      const newArr = []
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].name === arr2[i]) {
            newArr.push(arr1[j])
          }
        }
      }
      return newArr
    },

    handleCheckedCitiesChange(val) {
      const res = this.getArrEqual(this.serviceContents, val)

      const serviceNames = res.map((item) => {
        return item.name
      })
      this.serviceName = serviceNames.join('/')
      const idd = res.map((item) => {
        return item.id
      })
      this.ids = idd.join(',')
      // this.listQuery.serviceTypeName=this.ids
    },
    handleImageSuccess(file) {
      if (file.code === 200) {
        this.$message.success(file.message)
        this.fetchData()
      } else {
        this.$message.error(file.message)
      }
    },
    handleState(row) {
      // let data = {
      //   state:
      // };
      updateSuppliersState(row.id, row.state).then((res) => {
        if (res.data.code === '200') {
          this.$message.success(res.data.message)
          this.fetchData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleProvince(val) {
      this.suppliers.areaId = ''
      this.suppliers.cityId = ''
      this.CitiesList = []
      this.AreasList = []
      getCities(val).then((res) => {
        this.CitiesList = res.data.data
      })
      let obj = {}
      obj = this.allProvinceList.find((item) => {
        return item.provinceId === val
      })
      this.suppliers.provinceName = obj.province
    },
    handleCity(val) {
      // this.CitiesList=[];
      this.AreasList = []

      let obj = {}
      obj = this.CitiesList.find((item) => {
        return item.city === val
      })

      const cityId = obj.cityId
      getAreas(cityId).then((res) => {
        this.AreasList = res.data.data
      })
    },
    handleChangePro2(id) {
      // let obj = {};
      // obj = this.AreasList.find((item) => {
      //   return item.areaId === id;
      // });
      // this.suppliers.areaName = obj.area;

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      // this.role = Object.assign({}, defaultRole);

      this.dialogType = 'new'
      this.dialogVisible = true
      sessionStorage.removeItem('supplierId')
      this.$nextTick(() => {
        this.$refs['suppliers'].clearValidate()
      })
      this.suppliers = {}
    },
    confirmSupplier() {
      const isEdit = this.dialogType === 'edit'
      this.suppliers.agreementStartTime = this.agreementStartTime[0]
      this.suppliers.agreementEndTime = this.agreementStartTime[1]
      // this.suppliers.serviceContent = this.checkedCities;
      this.suppliers.serviceTypeIds = this.ids
      this.suppliers.serviceTypeNames = this.serviceName
      if (isEdit) {
        this.$refs['suppliers'].validate((valid) => {
          if (valid) {
            updateSuppliers(this.suppliers).then((res) => {
              if ((res.code === '200')) {
                this.$message.success(res.data.message)
                this.dialogVisible = false
                this.suppliers = ''
                this.fetchData()
                this.editDisabled = false
              }
            })
          }
        })

        return false
      }
      this.$refs['suppliers'].validate((valid) => {
        if (valid) {
          addSuppliers(this.suppliers).then((res) => {
            if ((res.code === '200')) {
              this.$message.success(res.data.message)
              this.dialogVisible = false
              this.suppliers = ''
              this.fetchData()
            }
          })
        }
      })
    },
    test() {
      console.log('ddd')
    },
    getInfo(supplierId) {
      const data = {
        supplierId: supplierId,
        type: 1
      }
      getSupplierAttachInfo(data).then((res) => {
        this.vedioList = res.data.data
      })
      const data2 = {
        supplierId: supplierId,
        type: 2
      }
      getSupplierAttachInfo(data2).then((res) => {
        this.vedioList2 = res.data.data
      })
      const data3 = {
        supplierId: supplierId,
        type: 3
      }
      getSupplierAttachInfo(data3).then((res) => {
        this.vedioList3 = res.data.data
      })
      const data4 = {
        supplierId: supplierId,
        type: 4
      }
      getSupplierAttachInfo(data4).then((res) => {
        this.vedioList4 = res.data.data
      })
    },
    handleEdit(row) {
      this.editDisabled = true
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.getInfo(row.id)
      // this.newName = scope.name;
      getSupplierInfo(row.id).then((res) => {
        if (res.data.code === 200) {
          this.suppliers = res.data.data
          const cityId = res.data.data.cityId

          // this.suppliers.cityId = res.data.data.cityName;
          // this.suppliers.areaId = res.data.data.areaName;

          this.suppliers.serviceTypeNametes = res.data.data.serviceTypeNames
          getCities(res.data.data.provinceId).then((res) => {
            this.CitiesList = res.data.data
          })
          getAreas(cityId).then((res) => {
            this.AreasList = res.data.data
          })
        }
      })
      // this.suppliers = row;

      sessionStorage.setItem('supplierId', row.id)
      this.agreementStartTime.push(
        row.agreementStartTime,
        row.agreementEndTime
      )
    },
    fetchData() {
      this.listLoading = true
      suppliersList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
      getSupplierContent().then((res) => {
        this.serviceContents = res.data.data
        // console.log(this.serviceContents)
      })
      getSupplierType().then((res) => {
        this.supplierTypeList = res.data.data
      })
    },
    getallProvinceList() {
      getProvinces().then((res) => {
        this.allProvinceList = res.data.data
      })
    },
    handleDel(id) {
      this.$confirm('确定删除该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          deleteSupplier(id).then((res) => {
            if (res.data.code === '200') {
              this.$message.success(res.data.message)
              this.fetchData()
            } else {
              this.$message.error(res.data.message)
            }
          })
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    showEvaluate(row) {
      getSupplierBySupplierId(row.id).then(res => {
        this.evaluates_data = res.data.data
      })

      this.supplierName = row.supplierName

      this.showEvaluateInfo = true
    },
    closeEvaluate() {
      this.showEvaluateInfo = false
    }
  }
}
</script>

<style lang="scss" scoped>
.ft_del {
  float: right;
  margin-right: 20px;
  color: #429eff;
}
.region_select .el-select {
  margin-right: 10px;
}
.el-rate {
  line-height: 2;
}
.fj-box {
  position: relative;
  .el-tag {
    position: relative;
    // width: 8%;
    // top: 5px;
    // left: 0;
    z-index: 99;
  }
}
.fj-box ul {
  padding: 0;
  // margin-top: 20%;
  li {
    width: 90%;``
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    background: #f8f9fb;
    margin-bottom: 10px;
    padding: 10px 0px;

    padding-left: 10px;
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 280px !important;
}
.el-upload-dragger {
  border: none;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    span:first-child {
      font-weight: bolder;
    }
    span:not(:first-child) {
      margin-left: 40px;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
